<template>
  <div class='app-container'>
    <p>样式默认为300px 在组件上可以增加样式 ztree-select display为inline-block </p>
    <!-- v-on:namearr="namearrd"  弃用 -->{{isexpand}}
    <p>
      <span> 多选-正常：</span>
      <!--:allcheck="quanxuan"-->
      <ztree-select @change="selectChange"  :isexpand="isexpand" class="wd500"  v-model="arrdefaults" multiple :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <p>
      <span> 多选-正常-父子关联：</span>
      <!--:allcheck="quanxuan"-->
      <ztree-select @change="selectChange" :checkass="checkass" :isexpand="isexpand" class="wd500"  v-model="arrdefaults" multiple :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <p>
      <span> 多选-正常-父子关联-根据参数showchild默认收起项：</span>
      <!--:allcheck="quanxuan"-->
      <ztree-select @change="selectChange" :regchild="regchild" :checkass="checkass" :isexpand="isexpand" class="wd500"  v-model="arrdefaults" multiple :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <p>
      <span> 多选-只展示不可点击：</span>
      <ztree-select :viewinfo="true" @change="selectChange" class="wd500" v-model="arrdefaults" multiple :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <p>
      <span> 多选-禁用：</span>
      <ztree-select disabled @change="selectChange" class="wd500" v-model="arrdefaults" multiple :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <p>
      <span> 单选-正常：</span>
      <ztree-select class="wd500" v-model="arr.name" :treedata="treedata" :childprops="childprops"></ztree-select>
      {{arr.name}}
    </p>
    <p>
      <span> 单选-只展示不可点击：</span>
      <ztree-select :viewinfo="viewinfo" class="wd500" v-model="defaults" :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <p>
      <span> 单选-禁用：</span>
      <ztree-select :disabled='disabled' class="wd500" v-model="defaults" :treedata="treedata" :childprops="childprops"></ztree-select>
    </p>
    <!-- <ztree-select :viewinfo="true"  @change="selectChange" class="wd500" v-model="arrdefaults"  multiple :treedata="treedata" :childprops="childprops"></ztree-select>
        <ztree-select :disabled='disabled' class="wd500" v-model="defaults" :treedata="treedata" :childprops="childprops"></ztree-select>
        <ztree-select :disabled='disabled' class="wd500" v-model="data.id" :treedata="treedata" :childprops="childprops"></ztree-select> -->
    <p>多选id数组： {{arrdefaults}}</p>
    <p>多选文字name: {{namearrs}} </p>
    <p>单选： {{defaults}}</p>
    <button @click="cloneClick">单选清空</button>
    <button @click="allcheck">全选</button>{{quanxuan}}
     <table class="demo-table" border="0">
       <tr>
         <th>api</th>
         <th>说明</th>
         <th ref="ddd">类型</th>
         <th>默认值</th>
       </tr>
       <tr>
         <td>value（v-model)</td>
         <td>绑定值</td>
         <td ref="ddds">多选为数组array,单选为字符串string</td>
         <td>默认为字符串</td>
       </tr>
       <tr>
         <td>multiple</td>
         <td>多选</td>
         <td>boolean</td>
         <td>false</td>
       </tr>
       <tr>
         <td>treedata</td>
         <td>数据源</td>
         <td>array</td>
         <td>树形需指定childprops</td>
       </tr>
       <tr>
         <td>childprops</td>
         <td>配置选项</td>
         <td>object</td>
         <td>childprops: { <br>
              name: "displayName", //显示名字<br>
              children: "orgs", //子级字段名<br>
              lv: "depth", //当前层级<br>
              showChild: "canshow" //是否默认展开子集<br>
            },</td>
       </tr>
       <tr>
         <td>viewinfo</td>
         <td>只读展示</td>
         <td>boolean</td>
         <td>false</td>
       </tr>
       <tr>
         <td>disabled</td>
         <td>禁用</td>
         <td>boolean</td>
         <td>false</td>
       </tr>
        <tr>
         <td>regchild</td>
         <td>是否根据childprops里的showChild判断自己展开关闭</td>
         <td>boolean</td>
         <td>false</td>
       </tr>
       
     </table>
  </div>
</template>
<script>
import Vue from 'vue'
import ztreeSelect from "@/components/z-select/index.vue";
export default {
  components: {
    ztreeSelect
  },
  data() {
    return {
      arr:{
        name:3
      },
      //数组子级相关参数
      quanxuan: false,
      childprops: {
        name: "displayName", //显示名字
        children: "orgs", //子级字段名
        lv: "depth" ,//当前层级
        showChild:'canshow' //判断自己的参数
      },
      arrdefaults: [1, 7], //多选默认项
      defaults: "3", //单选默认项
      data: {
        id: "2"
      },
      checkass:true, //设置父子关联
      //多选数组 可根据接口返回赋值 规定为为数组
      regchild:true, //设置根据字段判断显示
      treedata: [
        {
          id: 1,
          parentId: null,
          code: "00001",
          depth: 0,
          displayName: "锦和保险销售服务有限公司",
          canshow:false,
          orgs: [
            {
              id: 3,
              parentId: 1,
              code: "00001.00001",
              depth: 2,
              displayName: "河北分公司",
              canshow:false,
              orgs: [
                {
                  id: 5,
                  parentId: 3,
                  code: "00001.00001.00001",
                  depth: 3,
                  displayName: "邢台分公司",
                  orgs: [
                    {
                      id: 144,
                      parentId: 5,
                      code: "00001.00001.00001.00001",
                      depth: 4,
                      displayName: "业务一部",
                      orgs: [
                        {
                          id: 158,
                          parentId: 144,
                          code: "00001.00001.00001.00001.00001",
                          depth: 5,
                          displayName: "1",
                          orgs: null
                        }
                      ]
                    },
                    {
                      id: 169,
                      parentId: 5,
                      code: "00001.00001.00001.00002",
                      depth: 4,
                      displayName: "邢台2",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 7,
                  parentId: 3,
                  code: "00001.00001.00003",
                  depth: 3,
                  displayName: "业务一部（石家庄）",
                  orgs: [
                    {
                      id: 27,
                      parentId: 7,
                      code: "00001.00001.00003.00002",
                      depth: 4,
                      displayName: "市区业务部",
                      orgs: null
                    },
                    {
                      id: 28,
                      parentId: 7,
                      code: "00001.00001.00003.00003",
                      depth: 4,
                      displayName: "业务一组（田）",
                      orgs: null
                    },
                    {
                      id: 29,
                      parentId: 7,
                      code: "00001.00001.00003.00004",
                      depth: 4,
                      displayName: "业务二组（罗）",
                      orgs: null
                    },
                    {
                      id: 30,
                      parentId: 7,
                      code: "00001.00001.00003.00005",
                      depth: 4,
                      displayName: "业务三组（乔）",
                      orgs: null
                    },
                    {
                      id: 31,
                      parentId: 7,
                      code: "00001.00001.00003.00006",
                      depth: 4,
                      displayName: "业务四组（刘）",
                      orgs: null
                    },
                    {
                      id: 32,
                      parentId: 7,
                      code: "00001.00001.00003.00007",
                      depth: 4,
                      displayName: "业务五组（唐）",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 12,
                  parentId: 3,
                  code: "00001.00001.00004",
                  depth: 3,
                  displayName: "保定第一分公司",
                  orgs: [
                    {
                      id: 34,
                      parentId: 12,
                      code: "00001.00001.00004.00001",
                      depth: 4,
                      displayName: "业务团队",
                      orgs: null
                    },
                    {
                      id: 35,
                      parentId: 12,
                      code: "00001.00001.00004.00002",
                      depth: 4,
                      displayName: "业务一部",
                      orgs: null
                    },
                    {
                      id: 36,
                      parentId: 12,
                      code: "00001.00001.00004.00003",
                      depth: 4,
                      displayName: "业务二部",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 13,
                  parentId: 3,
                  code: "00001.00001.00005",
                  depth: 3,
                  displayName: "业务二部（沧州）",
                  orgs: [
                    {
                      id: 39,
                      parentId: 13,
                      code: "00001.00001.00005.00003",
                      depth: 4,
                      displayName: "业务三组",
                      orgs: null
                    },
                    {
                      id: 100,
                      parentId: 13,
                      code: "00001.00001.00005.00004",
                      depth: 4,
                      displayName: "业务222",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 14,
                  parentId: 3,
                  code: "00001.00001.00006",
                  depth: 3,
                  displayName: "业务三部（廊坊）",
                  orgs: [
                    {
                      id: 40,
                      parentId: 14,
                      code: "00001.00001.00006.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    },
                    {
                      id: 41,
                      parentId: 14,
                      code: "00001.00001.00006.00002",
                      depth: 4,
                      displayName: "业务团队",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 15,
                  parentId: 3,
                  code: "00001.00001.00007",
                  depth: 3,
                  displayName: "业务四部（衡水）",
                  orgs: [
                    {
                      id: 42,
                      parentId: 15,
                      code: "00001.00001.00007.00001",
                      depth: 4,
                      displayName: "直属业务部",
                      orgs: null
                    },
                    {
                      id: 43,
                      parentId: 15,
                      code: "00001.00001.00007.00002",
                      depth: 4,
                      displayName: "业务一组（武邑）",
                      orgs: null
                    },
                    {
                      id: 44,
                      parentId: 15,
                      code: "00001.00001.00007.00003",
                      depth: 4,
                      displayName: "业务二组（故城）",
                      orgs: null
                    },
                    {
                      id: 45,
                      parentId: 15,
                      code: "00001.00001.00007.00004",
                      depth: 4,
                      displayName: "业务三组（阜城）",
                      orgs: null
                    },
                    {
                      id: 46,
                      parentId: 15,
                      code: "00001.00001.00007.00005",
                      depth: 4,
                      displayName: "业务四组（枣强）",
                      orgs: null
                    },
                    {
                      id: 47,
                      parentId: 15,
                      code: "00001.00001.00007.00006",
                      depth: 4,
                      displayName: "业务五组（冀县）",
                      orgs: null
                    },
                    {
                      id: 48,
                      parentId: 15,
                      code: "00001.00001.00007.00007",
                      depth: 4,
                      displayName: "业务六绷 （深县）",
                      orgs: null
                    },
                    {
                      id: 49,
                      parentId: 15,
                      code: "00001.00001.00007.00008",
                      depth: 4,
                      displayName: "业务七组（安平）",
                      orgs: null
                    },
                    {
                      id: 50,
                      parentId: 15,
                      code: "00001.00001.00007.00009",
                      depth: 4,
                      displayName: "业务八组（武强）",
                      orgs: null
                    },
                    {
                      id: 51,
                      parentId: 15,
                      code: "00001.00001.00007.00010",
                      depth: 4,
                      displayName: "业务九组（铙阳）",
                      orgs: null
                    },
                    {
                      id: 52,
                      parentId: 15,
                      code: "00001.00001.00007.00011",
                      depth: 4,
                      displayName: "业务十组（景县）",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 18,
                  parentId: 3,
                  code: "00001.00001.00009",
                  depth: 3,
                  displayName: "业务六部（张家口）",
                  orgs: [
                    {
                      id: 72,
                      parentId: 18,
                      code: "00001.00001.00009.00001",
                      depth: 4,
                      displayName: "业和一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 19,
                  parentId: 3,
                  code: "00001.00001.00010",
                  depth: 3,
                  displayName: "业务七部（邯郸）",
                  orgs: [
                    {
                      id: 73,
                      parentId: 19,
                      code: "00001.00001.00010.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 20,
                  parentId: 3,
                  code: "00001.00001.00011",
                  depth: 3,
                  displayName: "业务八部（秦皇岛）",
                  orgs: [
                    {
                      id: 74,
                      parentId: 20,
                      code: "00001.00001.00011.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    },
                    {
                      id: 125,
                      parentId: 20,
                      code: "00001.00001.00011.00002",
                      depth: 4,
                      displayName: "123",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 107,
                  parentId: 3,
                  code: "00001.00001.00013",
                  depth: 3,
                  displayName: "唐山分公司",
                  orgs: null
                },
                {
                  id: 124,
                  parentId: 3,
                  code: "00001.00001.00014",
                  depth: 3,
                  displayName: "对对对大大",
                  orgs: null
                },
                {
                  id: 166,
                  parentId: 3,
                  code: "00001.00001.00015",
                  depth: 3,
                  displayName: "邢台分公司1",
                  orgs: null
                },
                {
                  id: 167,
                  parentId: 3,
                  code: "00001.00001.00016",
                  depth: 3,
                  displayName: "邢台分公司12",
                  orgs: null
                }
              ]
            },
            {
              id: 4,
              parentId: 1,
              code: "00001.00002",
              depth: 2,
              displayName: "内蒙古分公司456",
              orgs: [
                {
                  id: 26,
                  parentId: 4,
                  code: "00001.00001.00003.00001",
                  depth: 4,
                  displayName: "前台业务部-1",
                  orgs: [
                    {
                      id: 101,
                      parentId: 26,
                      code: "00001.00001.00003.00001.00001",
                      depth: 5,
                      displayName: "1111",
                      orgs: null
                    },
                    {
                      id: 106,
                      parentId: 26,
                      code: "00001.00001.00003.00001.00002",
                      depth: 5,
                      displayName: "测试1111112",
                      orgs: null
                    },
                    {
                      id: 159,
                      parentId: 26,
                      code: "00001.00001.00003.00001.00003",
                      depth: 5,
                      displayName: "业务三部",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 93,
                  parentId: 4,
                  code: "00001.00002.00001",
                  depth: 3,
                  displayName: "兴安盟分公司",
                  orgs: null
                },
                {
                  id: 94,
                  parentId: 4,
                  code: "00001.00002.00002",
                  depth: 3,
                  displayName: "巴严淖尔分公司",
                  orgs: null
                },
                {
                  id: 95,
                  parentId: 4,
                  code: "00001.00002.00003",
                  depth: 3,
                  displayName: "业务一部",
                  orgs: null
                },
                {
                  id: 160,
                  parentId: 4,
                  code: "00001.00002.00005",
                  depth: 3,
                  displayName: "业务三部",
                  orgs: null
                },
                {
                  id: 162,
                  parentId: 4,
                  code: "00001.00002.00006",
                  depth: 3,
                  displayName: "业务二部",
                  orgs: null
                }
              ]
            },
            {
              id: 8,
              parentId: 1,
              code: "00001.00001",
              depth: 2,
              displayName: "山东分公司",
              orgs: [
                {
                  id: 9,
                  parentId: 8,
                  code: "00001.00001.00001",
                  depth: 3,
                  displayName: "莱芜分公司",
                  orgs: null
                },
                {
                  id: 55,
                  parentId: 8,
                  code: "00001.00001.00002",
                  depth: 3,
                  displayName: "直属业务部",
                  orgs: [
                    {
                      id: 75,
                      parentId: 55,
                      code: "00001.00001.00002.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 56,
                  parentId: 8,
                  code: "00001.00001.00003",
                  depth: 3,
                  displayName: "枣庄分公司",
                  orgs: [
                    {
                      id: 76,
                      parentId: 56,
                      code: "00001.00001.00003.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 57,
                  parentId: 8,
                  code: "00001.00001.00004",
                  depth: 3,
                  displayName: "菜武分公司",
                  orgs: [
                    {
                      id: 77,
                      parentId: 57,
                      code: "00001.00001.00004.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 58,
                  parentId: 8,
                  code: "00001.00001.00005",
                  depth: 3,
                  displayName: "日照分公司",
                  orgs: null
                },
                {
                  id: 59,
                  parentId: 8,
                  code: "00001.00001.00006",
                  depth: 3,
                  displayName: "业务一部（烟台)",
                  orgs: [
                    {
                      id: 79,
                      parentId: 59,
                      code: "00001.00001.00006.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: [
                        {
                          id: 80,
                          parentId: 79,
                          code: "00001.00001.00006.00001.00001",
                          depth: 5,
                          displayName: "业务一组",
                          orgs: null
                        }
                      ]
                    }
                  ]
                },
                {
                  id: 60,
                  parentId: 8,
                  code: "00001.00001.00007",
                  depth: 3,
                  displayName: "业务二部（济南）",
                  orgs: [
                    {
                      id: 81,
                      parentId: 60,
                      code: "00001.00001.00007.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 62,
                  parentId: 8,
                  code: "00001.00001.00009",
                  depth: 3,
                  displayName: "业务四部（聊城）",
                  orgs: [
                    {
                      id: 83,
                      parentId: 62,
                      code: "00001.00001.00009.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 63,
                  parentId: 8,
                  code: "00001.00001.00010",
                  depth: 3,
                  displayName: "业务五部（济宁）",
                  orgs: [
                    {
                      id: 84,
                      parentId: 63,
                      code: "00001.00001.00010.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 64,
                  parentId: 8,
                  code: "00001.00001.00011",
                  depth: 3,
                  displayName: "业务六部（淄博）",
                  orgs: [
                    {
                      id: 85,
                      parentId: 64,
                      code: "00001.00001.00011.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 66,
                  parentId: 8,
                  code: "00001.00001.00013",
                  depth: 3,
                  displayName: "业务八部（荷泽）",
                  orgs: [
                    {
                      id: 87,
                      parentId: 66,
                      code: "00001.00001.00013.00001",
                      depth: 4,
                      displayName: "业务一组",
                      orgs: null
                    }
                  ]
                },
                {
                  id: 134,
                  parentId: 8,
                  code: "00001.00001.00014",
                  depth: 3,
                  displayName: "可不可以",
                  orgs: null
                }
              ]
            },
            {
              id: 108,
              parentId: 1,
              code: "00001.00003",
              depth: 2,
              displayName: "湖南分公司",
              orgs: [
                {
                  id: 109,
                  parentId: 108,
                  code: "00001.00003.00001",
                  depth: 3,
                  displayName: "业务一部",
                  orgs: null
                },
                {
                  id: 127,
                  parentId: 108,
                  code: "00001.00003.00002",
                  depth: 3,
                  displayName: "湖南湘北分公司",
                  orgs: null
                },
                {
                  id: 128,
                  parentId: 108,
                  code: "00001.00003.00003",
                  depth: 3,
                  displayName: "阿萨德",
                  orgs: null
                },
                {
                  id: 129,
                  parentId: 108,
                  code: "00001.00003.00004",
                  depth: 3,
                  displayName: "大萨达",
                  orgs: null
                },
                {
                  id: 130,
                  parentId: 108,
                  code: "00001.00003.00005",
                  depth: 3,
                  displayName: "88大萨达",
                  orgs: null
                },
                {
                  id: 131,
                  parentId: 108,
                  code: "00001.00003.00006",
                  depth: 3,
                  displayName: "撒大声地",
                  orgs: null
                },
                {
                  id: 132,
                  parentId: 108,
                  code: "00001.00003.00007",
                  depth: 3,
                  displayName: "s大大",
                  orgs: null
                },
                {
                  id: 133,
                  parentId: 108,
                  code: "00001.00003.00008",
                  depth: 3,
                  displayName: "萨达",
                  orgs: null
                },
                {
                  id: 135,
                  parentId: 108,
                  code: "00001.00003.00009",
                  depth: 3,
                  displayName: "撒大大",
                  orgs: null
                },
                {
                  id: 136,
                  parentId: 108,
                  code: "00001.00003.00010",
                  depth: 3,
                  displayName: "sad范德萨范德萨",
                  orgs: null
                },
                {
                  id: 137,
                  parentId: 108,
                  code: "00001.00003.00011",
                  depth: 3,
                  displayName: "可以了么？",
                  orgs: null
                },
                {
                  id: 138,
                  parentId: 108,
                  code: "00001.00003.00012",
                  depth: 3,
                  displayName: "大萨达232",
                  orgs: null
                },
                {
                  id: 139,
                  parentId: 108,
                  code: "00001.00003.00013",
                  depth: 3,
                  displayName: "啊实打实",
                  orgs: null
                },
                {
                  id: 140,
                  parentId: 108,
                  code: "00001.00003.00014",
                  depth: 3,
                  displayName: "完整测试",
                  orgs: null
                },
                {
                  id: 141,
                  parentId: 108,
                  code: "00001.00003.00015",
                  depth: 3,
                  displayName: "safdasdfsa",
                  orgs: null
                },
                {
                  id: 146,
                  parentId: 108,
                  code: "00001.00003.00016",
                  depth: 3,
                  displayName: "dasd",
                  orgs: null
                }
              ]
            }
          ]
        }
      ],
      treedatas: [
        {
          id: 33,
          displayName: "以及",
          depth: 1,
          orgs: [
            {
              id: 44,
              displayName:
                "22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及22以及",
              depth: 2
            },
            {
              id: 44,
              displayName: "22以及",
              depth: 2
            }
          ]
        }
      ],
      namearrs: [], //多选返回文字数组
      disabled: true, //设置禁用
      viewinfo: true, //展示禁止点击
      isexpand: true //默认全展开
    };
  },
  created() {
    const me = this;
    let params = { id: 1 };
    this.post(params, "services/app/common/GetInsurances").then(rs => {
      console.log(rs);
      if (rs.success) {
        me.data.id = 34;
      } else {
        me.data.id = "2";
      }
    });
  },
  mounted() {
    setTimeout(() => {
        this.$refs['ddd'].style.color ='red'
    }, 1000);
    
  },
  methods: {
    cloneClick(){
      this.arr = Object.assign({},{},{})
      console.log(this.arr)
      // this.defaults = ''
    },
    namearr(val) {
      //弃用
      //获取多选name文字数组
      this.namearrs = val;
    },
    selectChange(val) {},
    allcheck() {
      // this.quanxuan = !this.quanxuan; arrdefaults
      this.quanxuan = !this.quanxuan
      if (this.quanxuan) {
        let childprops = this.childprops;
        let data = this.treedata;
        let arr = [];
        function allmap(datas) {
          datas.map(function(obj) {
            arr.push(obj.id);
            if (obj[childprops.children] instanceof Array) {
              allmap(obj[childprops.children]);
            }
          });
        }
        allmap(data);
        this.arrdefaults = arr;
      } else {
        this.arrdefaults = [];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.wd500 {
  width: 280px;
}
p {
  padding: 10px;
  span {
    width: 150px;
    text-align: right;
    line-height: 28px;
    display: inline-block;
  }
}
.demo-table{
  margin:30px;
  border-spacing:0px;
  border:none;
  border:1px solid #ddd;
  tr{
    td,th{
      border-right:1px solid #ddd;
      border-bottom: 1px solid #ddd;
      height:40px;
      text-align: center;
    }
  }
}
</style>

